<template>
  <div>
    <div class="user-message-wrap" v-if="isUserMessage">
      <div class="user-message" >
        <div class="message-wrap">
          <div class="chat-bubble user" style="background: rgb(0, 156, 224);color: rgb(255, 255, 255);">
            <p>{{ message.content }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="agent-message-wrap" v-else>
      <div class="agent-message" >
        <div class="message-wrap">
          <div class="chat-bubble-wrap">
            <div class="chat-bubble agent bg-white">
              <p>{{ message.content }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MESSAGE_TYPE } from '../helpers/constants'
export default {
  name: 'ChatMessage',
  props: {
    message: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    isUserMessage () {
      return this.message.messageType === MESSAGE_TYPE.INCOMING
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.user-message {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: 0 .25rem .125rem auto;
    max-width: 85%;
    text-align: right;
}
.agent-message {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0 0 .125rem .5rem;
    max-width: 88%;
}
.chat-bubble {
    box-shadow: 0 0.25rem 6px rgb(50 50 93 / 8%), 0 1px 3px rgb(0 0 0 / 5%);
    border-radius: 1.25rem;
    color: #fff;
    display: inline-block;
    font-size: .875rem;
    line-height: 1.5;
    padding: .75rem 1rem;
    text-align: left;
    word-break: break-word;
}
.chat-bubble.user {
    border-bottom-right-radius: .25rem;
}
.message-wrap {
    margin-right: .5rem;
    max-width: 100%;
}
.chat-bubble {
    box-shadow: 0 0.25rem 6px rgb(50 50 93 / 8%), 0 1px 3px rgb(0 0 0 / 5%);
    border-radius: 1.25rem;
    color: #fff;
    display: inline-block;
    font-size: .875rem;
    line-height: 1.5;
    padding: .75rem 1rem;
    text-align: left;
    word-break: break-word;
}
.chat-bubble.agent {
    border-bottom-left-radius: .25rem;
    color: #3c4858;
}
.bg-white {
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255,255,255,var(--bg-opacity));
}
</style>
